<template>
<div class="main">
  <div class="block">
      <div class="nav">
        <ul>
            <li :class="{native:this.$route.path == '/'}" class="hoverli"><nuxt-link target="_blank" to="/">首页</nuxt-link></li>
            <!-- <li :class="{native:this.$route.path == '/trust'}" class="hoverli"><nuxt-link target="_blank" to="/trust">信托资管</nuxt-link></li>
            <li :class="{native:this.$route.path == '/fund'}" class="hoverli"><nuxt-link target="_blank" to="/fund">契约基金</nuxt-link></li>
             <li :class="{native:this.$route.path == '/equity'}" class="hoverli"><nuxt-link target="_blank" to="/equity">PE/VC</nuxt-link></li>
             <li class="overseasbox" :class="{native:this.$route.path == '/insurance'}">海外投资<span class="jiao"></span>
                <ul class="overseas">
                  <li><nuxt-link target="_blank" to="/insurance">海外保险</nuxt-link></li>
                  <li><nuxt-link target="_blank" to="/house">海外房产</nuxt-link></li>
                </ul>
             </li> -->
              <li :class="{native:this.$route.path == '/news/dailynews'}" class="hoverli"><nuxt-link target="_blank" to="/news/dailynews">7×24快讯</nuxt-link></li>
            <li class="hot hoverli" :class="{native:this.$route.path == '/research'}">
              <img src="../static/index/hot.gif" alt="热点">
               <nuxt-link target="_blank" to="/research">天沁投研</nuxt-link>
            </li>
            <li :class="{native:this.$route.path == '/advisory'}" class="hoverli"><nuxt-link target="_blank" to="/advisory">热点资讯</nuxt-link></li>
            <!-- <li :class="{native:this.$route.path == '/school'}" class="hoverli"><nuxt-link target="_blank" to="/school">投资学堂</nuxt-link></li> -->
            
             <li :class="{native:this.$route.path == '/column/shichangxinwen'}" class="hoverli"><nuxt-link target="_blank" to="/column/shichangxinwen">市场新闻</nuxt-link></li>
             <li :class="{native:this.$route.path == '/column/touzicelue'}" class="hoverli"><nuxt-link target="_blank" to="/column/touzicelue">投资策略</nuxt-link></li>
            <li :class="{native:this.$route.path == '/column/hongguanxinwen'}" class="hoverli"><nuxt-link target="_blank" to="/column/hongguanxinwen">宏观新闻</nuxt-link></li>


           

            <li :class="{native:this.$route.path == '/about'}" class="hoverli"><nuxt-link target="_blank" to="/about" rel="nofollow">关于我们</nuxt-link></li>                        
          </ul>
      </div>

       <div class="fixednav" v-if="isshowfixednav">
        <ul class="fixednavul">
            <li :class="{native:this.$route.path == '/'}" class="hoverli"><nuxt-link target="_blank" to="/">首页</nuxt-link></li>
            <!-- <li :class="{native:this.$route.path == '/trust'}" class="hoverli"><nuxt-link target="_blank" to="/trust">信托资管</nuxt-link></li>
            <li :class="{native:this.$route.path == '/fund'}" class="hoverli"><nuxt-link target="_blank" to="/fund">契约基金</nuxt-link></li>
            <li :class="{native:this.$route.path == '/equity'}" class="hoverli"><nuxt-link target="_blank" to="/equity">PE/VC</nuxt-link></li>
             <li class="overseasbox1" :class="{native:this.$route.path == '/insurance'}">海外投资<span class="jiao1"></span>
                <ul class="overseas1">
                  <li><nuxt-link target="_blank" to="/insurance">海外保险</nuxt-link></li>
                  <li><nuxt-link target="_blank" to="/house">海外房产</nuxt-link></li>
                </ul>
             </li> -->
            <li :class="{native:this.$route.path == '/research'}" class="hoverli">
               <nuxt-link target="_blank" to="/research">天沁投研</nuxt-link>  
            </li>
            <li :class="{native:this.$route.path == '/advisory'}" class="hoverli"><nuxt-link target="_blank" to="/advisory">热点资讯</nuxt-link></li>
             <!-- <li :class="{native:this.$route.path == '/school'}" class="hoverli"><nuxt-link target="_blank" to="/school">投资学堂</nuxt-link></li> -->
             <li :class="{native:this.$route.path == '/column/caijingtoutiao'}" class="hoverli"><nuxt-link target="_blank" to="/column/caijingtoutiao">财经头条</nuxt-link></li>
             <li :class="{native:this.$route.path == '/column/shichangxinwen'}" class="hoverli"><nuxt-link target="_blank" to="/column/shichangxinwen">市场新闻</nuxt-link></li>
             <li :class="{native:this.$route.path == '/column/touzicelue'}" class="hoverli"><nuxt-link target="_blank" to="/column/touzicelue">投资策略</nuxt-link></li>
            <li :class="{native:this.$route.path == '/column/hongguanxinwen'}" class="hoverli"><nuxt-link target="_blank" to="/column/hongguanxinwen">宏观新闻</nuxt-link></li>
            <li :class="{native:this.$route.path == '/about'}" class="hoverli"><nuxt-link target="_blank" to="/about" rel="nofollow">关于我们</nuxt-link></li>                     
          </ul>
      </div>
  </div>
  <transition name="fade">
    <div class="top" v-show="isshowfixednav">
        <div class="kefu" id="xxx">
            <img src="http://img3.tqcaifu.com/img/Head%20portrait.png" alt="在线客服">
            <h1>在线咨询</h1>
        </div>
        <contactus4></contactus4>
       <svg class="icon" aria-hidden="true" @click="gotoTop">
        <use xlink:href="#icon-tubiao102"></use>
      </svg>
      <p>回到顶部</p>
    </div>
   </transition>
</div>
</template>
<script>
import contactus4 from "./contactus4";

export default {
  data() {
    return {
      scroll: "",
      isshowfixednav: false
    };
  },
  components: {
    contactus4
  },
  methods: {
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll >= 560) {
        this.isshowfixednav = true;
      } else {
        this.isshowfixednav = false;
      }
    },
    gotoTop() {
      var scrollToptimer = setInterval(function() {
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var speed = top / 4;
        if (document.body.scrollTop != 0) {
          document.body.scrollTop -= speed;
        } else {
          document.documentElement.scrollTop -= speed;
        }
        if (top <= 30) {
          clearInterval(scrollToptimer);
        }
      }, 30);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.menu);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.overseasbox:hover .jiao{
  transform: rotate(180deg);
}
.overseasbox1:hover .jiao1{
  transform: rotate(180deg);
}
.jiao {
  transition: all .5s;
  position: absolute;
  height: 0;
  width: 0;
  top: 16px;
  right: 4px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #000;
}
.jiao1{
  transition: all .5s;  
  position: absolute;
  height: 0;
  width: 0;
  top: 28px;
  right: 4px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #000;
}
.overseasbox1{
  position: relative;
}
.overseasbox1:hover .overseas1{
  display: block;
}
.overseasbox {
  position: relative;
}
.overseas1{
  position: absolute;
  background: rgba(255, 255, 255, .9);
  z-index: 99;
  display: none;
  top: 46px;
}
.overseas1 li{
    font-size: 16px;
}
.overseas1 li:hover{
    color: #cd9c54;
}
.overseas {
  position: absolute;
  background: white;
  z-index: 99;
  display: none;
  top: 28px;
}
.overseas li {
  font-size: 14px;
}
.overseas li:hover{
  border: none;
  color: #cd9c54;
}
.overseasbox:hover {
  color: #333;
}
.overseasbox:hover .overseas {
  display: block;
  animation: shakes .2s ease-in-out 0s 1 alternate forwards;
}
@keyframes shakes {
  from {
     height: 0px;
     overflow: hidden;
  }
  to {
     height: 84px;
     overflow: hidden;
     
  }
}
.hot {
  position: relative;
}
.hot img {
  position: absolute;
  left: 70px;
}
.fixednav {
  position: fixed;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 60px;
  line-height: 60px;
  -moz-box-shadow: 0 -2px 2px #ccc inset; /* For Firefox3.6+ */
  -webkit-box-shadow: 0 -2px 2px #ccc inset; /* For Chrome5+, Safari5+ */
  box-shadow: 0 -2px 2px #ccc inset; /* For Latest Opera */
}
.fixednav .fixednavul {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  height: 60px;
  margin: 0 auto;
}
.main {
  background: white;
  border-top: 1px solid #cd9c54;
}
.block {
  position: relative;
}
.nav {
  width: 100%;
  height: 40px;
  line-height: 38px;
  margin: 0 auto;
  width: 1200px;
}
ul {
  width: 100%;
  margin: 10px auto;
  /* display: flex;
  justify-content: space-between; */
}
li {
  display: inline-block;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  text-align: left;
  width: 100px;
  text-align: center;
  margin-right: 50px;
}
.hoverli:hover {
  color: #cd9c54;
  border-bottom: 2px solid #cd9c54;
}
.native {
  color: #cd9c54;
  font-weight: 600;
  border-bottom: 2px solid #cd9c54;
}
.top {
  z-index: 9999;
  display: inline-block;
  position: fixed;
  bottom: 60px;
  right: 30px;
  font-size: 40px;
  color: #999;
  text-align: center;
}
.top .icon {
  -webkit-animation: rotateplane 3s infinite ease-in-out;
  animation: rotateplane 3s infinite ease-in-out;
  cursor: pointer;
}
.top .kefu img {
  margin-top: 6px;
}
.top .kefu {
  height: 164px;
  width: 180px;
  text-align: center;
  background: white;
}
.top .kefu h1 {
  font-size: 16px;
  font-weight: bolder;
  color: #333;
  margin: 10px auto;
  text-align: center;
}
.top p {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(220px);
  }
  50% {
    -webkit-transform: perspective(220px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(220px) rotateY(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateY(0);
    -webkit-transform: perspective(220px) rotateY(0);
  }
  50% {
    transform: perspective(120px) rotateY(0);
    -webkit-transform: perspective(220px) rotateY(0);
  }
  100% {
    transform: perspective(120px) rotateY(-179.9deg);
    -webkit-transform: perspective(220px) rotateY(-179.9deg);
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>
